<template>
  <div class="add-form f-c" style="overflow:auto;">
    <div class="header">
      <div class="title" style="margin: 0">
        基本信息
      </div>
      <el-button @click="onPageBack">返回</el-button>
    </div>
    <el-descriptions title="" :column="3">
      <el-descriptions-item label="项目名称">{{ currentDetail.projectName }}</el-descriptions-item>
      <el-descriptions-item label="会议类别">{{ currentDetail.meetingTypeName }}</el-descriptions-item>
      <el-descriptions-item label="项目资金">{{ currentDetail.pocket }}万元</el-descriptions-item>
      <el-descriptions-item label="项目主体单位">{{ currentDetail.investorName }}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{ currentDetail.contacts }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ currentDetail.phone }}</el-descriptions-item>
      <el-descriptions-item label="项目联系人">{{ currentDetail.projectContacts }}</el-descriptions-item>
      <el-descriptions-item label="项目联系人电话">{{ currentDetail.projectPhone }}</el-descriptions-item>
      <el-descriptions-item label="建设地址">{{ currentDetail.address }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="" :column="1">
      <el-descriptions-item label="项目内容" :span="1">
        {{ currentDetail.projectContent }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="header">
      <div class="title" style="margin-bottom: 0;margin-top: 10px">
        附件资料
      </div>
    </div>
    <el-descriptions title="" :column="3">
      <el-descriptions-item label="纸张">{{ currentDetail.paperName }}</el-descriptions-item>
      <el-descriptions-item label="页数">{{ currentDetail.pages }}</el-descriptions-item>
      <el-descriptions-item label="资料份数">{{ currentDetail.copies }}</el-descriptions-item>
      <el-descriptions-item label="节约资金（元）">{{ currentDetail.savingCapital }}</el-descriptions-item>

    </el-descriptions>
    <FileView :file-list="currentDetail.files || []" />
    <div v-if="currentDetail.status >= 4">
      <div class="header">
        <div class="title" style="margin-bottom: 0;margin-top: 10px">
          专家邀请情况
        </div>
      </div>
      <div class="tabs-border">
        <el-tabs v-model="activeName1">
          <el-tab-pane label="社会专家" name="first">
            <div class="title1" style="font-size: 14px;color: green;margin: 20px 10px">已接受邀请专家</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in acceptProfessorList" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-success" style="font-size: 48px;color: green" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!acceptProfessorList.length"></el-empty>
            <div class="title1" style="font-size: 14px;color: #4880FF;margin: 20px 10px">待接受邀请专家</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in professorList" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-question" style="font-size: 48px;color: #4880FF" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!professorList.length"></el-empty>

            <div class="title1" style="font-size: 14px;color: red;margin: 20px 10px">已拒绝邀请专家</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in unacceptProfessorList" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-error" style="font-size: 48px;color: red" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!unacceptProfessorList.length"></el-empty>

          </el-tab-pane>
          <el-tab-pane label="职能单位" name="second">
            <div class="title1" style="font-size: 14px;color: green;margin: 20px 10px">已接受邀请职能单位</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in acceptProfessorList2" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-success" style="font-size: 48px;color: green" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!acceptProfessorList2.length"></el-empty>

            <div class="title1" style="font-size: 14px;color: #4880FF;margin: 20px 10px">待接受邀请职能单位</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in professorList2" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-question" style="font-size: 48px;color: #4880FF" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!professorList2.length"></el-empty>

            <div class="title1" style="font-size: 14px;color: red;margin: 20px 10px">已拒绝邀请职能单位</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in unacceptProfessorList2" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-error" style="font-size: 48px;color: red" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
            <el-empty v-if="!unacceptProfessorList2.length"></el-empty>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div v-if="currentDetail.status > 4">
      <div class="header">
        <div class="title" style="margin-bottom: 0">
          与会专家（会议签到情况）
        </div>
      </div>
      <div class="tabs-border">
        <el-tabs v-model="activeName2">
          <el-tab-pane label="社会专家" name="first">
            <div class="title1" style="font-size: 14px;color: green;margin: 20px 10px">已签到</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in signProfessorList" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-success" style="font-size: 48px;color: green" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
              <el-empty v-if="!signProfessorList.length"></el-empty>
            <div class="title1" style="font-size: 14px;color: grey;margin: 20px 10px">未签到</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in unsignProfessorList" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-question" style="font-size: 48px;color: grey" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
              <el-empty v-if="!unsignProfessorList.length"></el-empty>

          </el-tab-pane>
          <el-tab-pane label="职能单位" name="second">
            <div class="title1" style="font-size: 14px;color: green;margin: 20px 10px">已签到</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in signProfessorList2" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-success" style="font-size: 48px;color: green" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
              <el-empty v-if="!signProfessorList2.length"></el-empty>

              <div class="title1" style="font-size: 14px;color: grey;margin: 20px 10px">未签到</div>
            <div class="icon1-list f-r f-w">
              <div v-for="item in unsignProfessorList2" :key="item" class="icon1" style="margin-right: 10px;margin-bottom: 10px;width: 120px">
                <i class="el-icon-question" style="font-size: 48px;color: grey" />
                <div>{{ item.expertName }}</div>
              </div>
            </div>
              <el-empty v-if="!unsignProfessorList2.length"></el-empty>

          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="header">
        <div class="title" style="margin-bottom: 0">
          评审意见
        </div>
      </div>
      <div class="tabs-border">
        <el-tabs v-model="activeName3">
          <el-tab-pane label="社会专家" name="CommentPage1" />
          <el-tab-pane label="职能单位" name="CommentPage2" />
        </el-tabs>
          <component :project-id="currentDetail.id" :is="activeName3" style="height: 500px;padding: 0" />
      </div>
    </div>
    <div v-if="currentDetail.status == 6">
      <div class="header">
        <div class="title" style="margin-bottom: 0">
          会议纪要
        </div>
      </div>
      <div class="meetingContent" v-html="meetingRecord.meetingContent" >
      </div>
      <!-- <div class="header">
        <div class="title" style="margin-bottom: 0">
          资金节约率
        </div>
      </div> -->
      <div class="header">
        <div class="title" style="margin-bottom: 0">
          会议照片
        </div>
      </div>
      <el-row :gutter="20">
        <el-col v-for="(item,index) in meetingRecord.imgs" :key="index" :span="6">
          <el-image :src="item.img" style="width: 100%;height: 120px" />
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import { http } from '@/api'
import CommentPage1 from './commentPage1'
import CommentPage2 from './commentPage2'
import FileView from '@/components/File/view'
import {getName, MeetingType, PocketType, Investor, PaperType} from '@/dict'

export default {
  name: 'FormAdd',
  components: {
    CommentPage1,
    CommentPage2,
    FileView
  },
  filters: {
    pocketName(val) {
      return PocketType.find(el => el.value == val)?.name
    }
  },
  data() {
    return {
      currentDetail: {},
      activeName1: 'first',
      activeName2: 'first',
      activeName3: 'CommentPage1',
      professorList: [], // 待接受的专家列表
      acceptProfessorList: [], // 已接受专家列表
      unacceptProfessorList: [], // 已拒绝专家列表
      signProfessorList: [], // 已签到专家列表
      unsignProfessorList: [], // 未签到专家列表

      professorList2: [],
      acceptProfessorList2: [], // 已接受专家列表
      unacceptProfessorList2: [], // 已拒绝专家列表
      signProfessorList2: [], // 已签到专家列表
      unsignProfessorList2: [], // 未签到专家列表
      meetingRecord: {
        imgs: [
        ]
      }
    }
  },
  created() {
    const item = this.$route.query
    this.currentDetail = item
    http.project_center.read({ id: item.id }).then(res => {
      this.currentDetail = {
          ...res.data,
          meetingTypeName: getName(res.data.meetingType, MeetingType),
          investorName: getName(res.data.investor, Investor),
          paperName: getName(res.data.paper, PaperType),
      }
        // 会议纪要
        console.log('this.currentDetail.status ',this.currentDetail.status )
        if (this.currentDetail.status == 6) {
            http.meeting_record.raed(item.id).then(res => {
                this.meetingRecord = res.data
            })
        }
    })
    http.project_center.personal1List(item.id).then(res => {
      res.data.forEach(el => {
        // 已邀请
        if (el.receiveStatus === 1) {
          this.professorList.push(el)
          this.unsignProfessorList.push(el)
        }
        // 已接受，未签到
         else if (el.receiveStatus === 2) {
          this.acceptProfessorList.push(el)
          this.unsignProfessorList.push(el)
        } else if (el.receiveStatus === 3) {
          // 已拒绝
          this.unacceptProfessorList.push(el)
        } else if (el.receiveStatus === 4) {
          // 已接受 已签到
          this.acceptProfessorList.push(el)
          this.signProfessorList.push(el)
        } else if(el.receiveStatus === 5) {
          this.signProfessorList.push(el)
        }
      })
    })
    http.project_center.personal2List(item.id).then(res => {
      res.data.forEach(el => {
        // 已接受，未签到
        if (el.receiveStatus === 1) {
          this.professorList2.push(el)
          this.unsignProfessorList2.push(el)
        }
        else if (el.receiveStatus === 2) {
          this.acceptProfessorList2.push(el)
          this.unsignProfessorList2.push(el)
        } else if (el.receiveStatus === 3) {
          // 已拒绝
          this.unacceptProfessorList2.push(el)
        } else if (el.receiveStatus === 4) {
          // 已接受 已签到
          this.acceptProfessorList2.push(el)
          this.signProfessorList2.push(el)
        } else if (el.receiveStatus === 5){
          this.signProfessorList2.push(el)
        }
      })
    })

  },
  methods: {
    onPageBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.tabs-border {
    border: 1px solid #0A74F0;
    border-radius: 20px;
    padding: 10px 20px;
}
.icon1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title {
    margin-top: 30px;
}
.meetingContent {
    font-size: 14px;
    line-height: 16px;
    color: #1C1D21;
}
</style>
